<template>
  <div class="sensitive-box" id="sensitive-box">
      <el-form ref="form" :model="form" label-width="150px" :rules="rules">
				<el-form-item label="是否启用敏感词提示">
					<el-radio-group v-model="form.isSensitiveWords">
						<el-radio :label="true">是</el-radio>
						<el-radio :label="false">否</el-radio>
					</el-radio-group>
					<span class="tip" style="font-size: 10px; color: #3b5998;margin-left:15px">注：开启敏感词提示后，通话中识别到敏感词时会及时通知到监控座席</span>
				</el-form-item>
				<el-form-item label="选择被监控人" v-if="form.isSensitiveWords">
					<el-checkbox-group v-model="form.monitors">
						<el-checkbox label="agent" name="type">座席</el-checkbox>
						<el-checkbox label="customer" name="type">客户</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="是否通知监控座席" v-if="form.isSensitiveWords">
					<el-radio-group v-model="form.isNoticeAgent">
						<el-radio :label="true">是</el-radio>
						<el-radio :label="false">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="敏感词"  prop="sensitiveWords">
					<p class="tip" style="font-size:10px; color: #3b5998;margin-top: 7px"><i class="iconfont icon-tishi1"></i>多个敏感词用英文逗号或回车隔开</p>
					<el-input type="textarea" v-model="form.sensitiveWords" placeholder="多个敏感词用英文逗号或回车隔开" :autosize="{ minRows: 4, maxRows: 4}"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">保存</el-button>
				</el-form-item>
			</el-form>
  </div>
</template>
<script>
  import AgentTreeSelect from '@/components/public-modules/agent-tree/AgentTreeSelect'
  export default {
    name: 'remoteControlAgents',
    data() {
      return {
        form: {
					isSensitiveWords: false,
					isNoticeAgent: true,
					monitors: ['agent'],
					sensitiveWords: '',
					configType: "sensitiveWords"
				},
				rules: {
          sensitiveWords: [
            { required: true, message: '敏感词必填', trigger: 'blur' }
          ]
				}
      }
    },
    methods: {
      onSubmit() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.$store.dispatch('updateTranslationConfig', this.form).then((res) => {
							if (res.success) {
								this.$message.success('保存成功')
							}
						})
          } else {
            return false;
          }
        });
			},
			getConfig () {
        this.$store.dispatch('getCache', {type: 'translationConfig'}).then((res) => {
					this.form.isSensitiveWords = res.isSensitiveWords || false
					this.form.isNoticeAgent = res.isNoticeAgent || true
					this.form.sensitiveWords = res.sensitiveWords || ''
					this.form.monitors = res.monitors || ['agent']
        })
			}
		},
		beforeMount () {
			this.getConfig()
		}
  }
</script>
<style lang="stylus" scoped>
	@import "../../../../../assets/common.styl"
	.sensitive-box
	  font-size 12px
	.tip
		color #ccc
	.wraper
		padding 0 20px 20px
		.prompt
			color $c-prompt
			padding 12px 0 20px
		.label
			display block
			padding-bottom 6px
		.agent-list
			padding-top 20px
			padding-bottom 20px
			margin-top 20px
			border-top 1px solid $c-border1
		.clear
			margin-left 20px
		.no-border
			margin-right 40px
			border none
			padding 0
			color $cf-gray0
</style>
<style lang='stylus'>
 #sensitive-box
   .el-textarea 
	   width 50%
</style>
